<!--
Copyright 2011 Saiyasodharan (http://saiy2k.blogspot.com/)

This file is part of SpiroCanvas (http://code.google.com/p/spirocanvas/)

SpiroCanvas is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

SpiroCanvas is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with SpiroCanvas.  If not, see <http://www.gnu.org/licenses/>.
-->

<!DOCTYPE html>

<html>
<head>

	<meta name="description" content="A HTML5 application to draw amazing spirographs" />
	<meta name="keywords" content="HTML5, web, application, draw, spirographs" />
	<meta name="author" content="Saiyasodharan" />
	<meta charset="UTF-8" />
	
	<meta property="og:title" content="SpiroCanvas" />
	<meta property="og:type" content="website" />
	<meta property="og:url" content="http://www.gethugames.in/spirocanvas/" />
	<meta property="og:image" content="https://lh5.googleusercontent.com/-UV__GZ-xeTM/Tmho-72dHRI/AAAAAAAAAcQ/LDezwfyCnI0/s800/spiroGraph128.png" />
	<meta property="og:site_name" content="SpiroCanvas" />
	<meta property="fb:admins" content="100000655597076" />
	<meta property="og:description" content="Creative HTML5 App to draw colorful vibrant spirographs"/>
		  
	<html itemscope itemtype="http://schema.org/Product">
	<meta itemprop="name" content="SpiroCanvas">
	<meta itemprop="description" content="Creative HTML5 App to draw colorful vibrant spirographs">

	<link type="text/css" href="styleUI.css" rel="Stylesheet" />
	<link type="text/css" href="scripts/jqueryui/css/ui-darkness/jquery-ui-1.8.11.custom.css" rel="Stylesheet" />
	<link type="text/css" href="scripts/eyeConColorPicker/css/colorpicker.css" rel="Stylesheet" />
	
	<script type="text/javascript" src="scripts/config.js"></script>
	<script type="text/javascript" src="scripts/base64.js"></script>
	<script type="text/javascript" src="scripts/md5.js"></script>
	<script type="text/javascript" src="scripts/jquery.js"></script>
	<script type="text/javascript" src="scripts/jqueryui/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="scripts/jqueryui/js/jquery-ui-1.8.11.custom.min.js"></script>
	<script type="text/javascript" src="scripts/eyeConColorPicker/js/colorpicker.js"></script>
	<script type="text/javascript" src="scripts/spiroCanvas.js"></script>
	<script type="text/javascript" src="scripts/MMath.js"></script>
	<script type="text/javascript" src="scripts/FBWrapper.js"></script>
	<script type="text/javascript" src="scripts/FlickrWrapper.js"></script>
	<script type="text/javascript" src="scripts/colorConversion.js"></script>
	<script type="text/javascript" src="scripts/spiroGraph.js"></script>
	<script type="text/javascript" src="scripts/spiroCanvasCore.js"></script>
	<script type="text/javascript" src="scripts/spiroCanvasUIHelper.js"></script>
	<script type="text/javascript" src="scripts/spiroCanvasUI.js"></script>
	
	<script language="javascript">
		
		(function( $ )
		{
			//a jquery extension to move an element to the center of the screen
			$.fn.center = function ()
			{
				this.css("position","absolute");
				this.css("top",  ( $(window).height() - this.outerHeight() ) / 2 + $(window).scrollTop()  + "px");
				this.css("left", ( $(window).width()  - this.outerWidth()  ) / 2 + $(window).scrollLeft() + "px");
				return this;
			};
			
			//a jquery extension to move an element to the left-center of the screen
			$.fn.leftCenter = function ()
			{
				this.css("position","absolute");
				this.css("top",  ( $(window).height() - this.outerHeight() ) / 2 + $(window).scrollTop()  + "px");
				this.css("left", ( "0px" ));
				return this;
			};
		})( jQuery );
		
		function preload(arrayOfImages) {
			$(arrayOfImages).each(function() {
				$('<img/>')[0].src = this;
    		});
		}
		
		function init()
		{
			if($.browser.msie)
			{
				$("#browserDiv").show();
				$("#loadingDiv").hide();
			}
			else
			{
				SpiroCanvas.spiroCanvasUI.initUI();
			}
			
			
			preload([
				'images/button1S.png',
				'images/button2S.png',
				'images/button3S.png'
			]);
			
		}
	</script>
	
	<script type="text/javascript">
		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-24593968-2']);
		  _gaq.push(['_trackPageview']);
		
		  (function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })();

	</script>
</head>

<body onload="init()"> 

<div id="preLoader" style="position:absolute; z-index:99999; width:100%; height: 100%; background-color:#333; color:#888; top:0px; left:0px;">
	<div id="loadingDiv" style="position:absolute; width:160px; height:50px; top:50%; left:50%; margin:-25px 0px 0px -80px; font: 32px 'arial'; border:0px solid; font-variant:small-caps;">
		Loading...
	</div>
	<div ID="browserDiv" style="display:none; position:absolute; width:800px; height:280px; top:50%; left:50%; margin:-140px 0px 0px -400px; font: 32px 'arial'; border:0px solid; font-variant:small-caps;">
		This application will run on all Modern browsers except Internet Explorer. If you are seeing this message, then you are using some version of IE. Please download and instal any of the following modern browsers to run this application:<br>
		1. <a href="http://www.google.com/chrome" target="_blank">Google Chrome</a> <br>
		2. <a href="http://www.mozilla.com" target="_blank">Mozilla Firefox</a> <br>
		3. <a href="http://www.opera.com/" target="_blank">Opera</a> <br>
	</div>
</div>

<div id="canvasContainer" style="position:absolute; z-index: 1; width:800; height:600;">
	<canvas id="canvasBG" 		width="800" height="600" style="position:absolute; left:0px; top:0px; z-index:0; background-color:#000"></canvas>
	<canvas id="canvasCircle" 	width="800" height="600" style="position:absolute; left:0px; top:0px; z-index:1;"></canvas>
	<canvas id="canvasResult" 	width="800" height="600" style="display:none;"></canvas>
</div>

<div id="statusDiv" style="text-align:center; z-index:9999">
	<div style="margin:auto; width:360px">
		<div id="statusLeftPanel">
			<a href="#" style="text-decoration:none;"><div id="saveButton" class="statusButton"></div></a>
		</div>
		<div id="statusLeftPanel">
			<a href="#" style="text-decoration:none;"><div id="randomButton" class="statusButton" style="color: #dd6666"></div></a>
		</div>
		<div id="statusLeftPanel">
			<a href="#" style="text-decoration:none;"><div id="shareButton" class="statusButton"></div></a>
		</div>
	</div>
</div>

<div class="toolPanel">
	<div class="toolBox" style="padding:10px 0px 0px 12px;">
		<div class="toolBoxHorizontalHeader"> Sliders </div>
		<div class="toolBoxHorizontalPanel">
			<div id="circle1RadiusSlider" style="width:100px; float:left;"></div>
			<div id="circle1RadiusLabel" style="border:0; color:#f6931f; font-weight:bold; float:right">60</div>
			<br> Fixed circle Radius
		</div>
		<div class="toolBoxHorizontalPanel">
			<div id="circle2RadiusSlider" style="width:100px; float:left;"></div>
			<div id="circle2RadiusLabel" style="border:0; color:#f6931f; font-weight:bold; float:right">50</div>
			<br> Moving circle Radius
		</div>
		<div class="toolBoxHorizontalPanel">
			<div id="pointDistanceSlider" style="width:100px; float:left;"></div>
			<div id="pointDistanceLabel" style="border:0; color:#f6931f; font-weight:bold; float:right">60</div>
			<br> Point Distance
		</div>
		<div class="toolBoxHorizontalPanel">
			<div id="resolutionSlider" style="width:100px; float:left;"></div>
			<div id="resolutionLabel" style="border:0; color:#f6931f; font-weight:bold; float:right">64</div>
			<br> Resolution
		</div>
		<div class="toolBoxHorizontalPanel">
			<div id="speedSlider" style="width:100px; float:left;"></div>
			<div id="speedLabel" style="border:0; color:#f6931f; font-weight:bold; float:right">20</div>
			<br> Animation Speed
		</div>
		<div class="toolBoxHorizontalPanel" style="border-bottom:1px solid #265a67"></div>
	</div>
	
	<div class="toolBox" style="padding:10px 0px 0px 12px;">
		<div class="toolBoxHorizontalHeader"> Color </div>
		<div class="toolBoxHorizontalPanel">
			<div id="foregroundColorDiv" style="width:126px; height:20px; background-color:#ffffff;"></div>
		</div>
		<div class="toolBoxHorizontalPanel">
			<div id="backgroundColorDiv" style="width:126px; height:24px; background-color:#000000;"></div>
		</div>
		<div id="radioColors" class="toolBoxHorizontalPanel">
			<input type="radio" id="colorSimpleRadio" name="radio" /><label for="colorSimpleRadio">Simple</label> <br>
			<input type="radio" id="colorRainbowRadio" name="radio" /><label for="colorRainbowRadio">Rainbow</label> <br>
			<input type="radio" id="colorGradientRadio" name="radio" checked="checked" /><label for="colorGradientRadio">Gradient</label> <br>
		</div>
		<div class="toolBoxHorizontalPanel" style="border-bottom:1px solid #265a67"></div>
	</div>
	
	<div class="toolBox" style="padding:10px 0px 0px 12px;">
		<div class="toolBoxHorizontalHeader"> Copyright </div>
		<div class="toolBoxHorizontalPanel" style="font: 12px arial">
			This program is released under GNU GPL V3. To know your rights, <a href="License.txt" target="_blank">click here</a>
			<br> <a href="#" id="creditsButton">CREDITS</a> <br>
		</div>
		<div class="toolBoxHorizontalPanel" style="border-bottom:1px solid #265a67"></div>
	</div>
	
	<div class="toolBox" style="padding:10px 0px 0px 32px;"></div>
	
	<div class="toolBoxHeader" id="advancedHeader"></div>
</div>

<div class="toolPanelRight">
	<div class="toolBoxHeaderRight" id="layersHeader"></div>
	<div class="toolBox" id="layersBox" style="height: 490px">
		<ul id="layersPanelSelectable">
			
		</ul>
		<div class="controlButton" style="left: 64px;" id="layerHideAllButton">Hide All</div>
		<div class="controlButton" style="left: 126px;" id="layerDeleteAllButton">Delete All</div>
	</div>
</div>

<div id="progressBar" style="width: 250px; height: 10px; z-index:1000"></div>

<canvas id="previewCanvas" width="320" height="240" style="position:absolute; background-color: #000; border:1px solid"> </canvas>

<div id="shareDialog" title="Share">
	<fb:login-button autologoutlink="true" perms="publish_stream, offline_access, photo_upload, share_item, user_photos"></fb:login-button> <a href="#" id="shareFacebook" style="display:inline">Upload</a> <br> <br>
	<a href="#" style="text-decoration:none"><div id="flickrLogin" style="width:80px; height:20px; padding-left:4px; padding-right:4px; font-weight:bold; background-color:#444466; display:inline; border:1px solid #6666aa; color: #ddd">Flickr Login</div></a> <a href="#" id="shareFlickr" style="display:inline">Upload</a> <br>
</div>

<div id="creditsDialog" title="Credits" style="text-align:center">
	<br>Developed by <a href="http://saiy2k.blogspot.com" target="_blank">Saiyasodharan</a>
	<br><br>Web Site: <a href="http://binarysaiy2k.blogspot.com/2011/02/spirocanvas.html" target="_blank">spirocanvas @ binarysaiy2k</a>
	<br><br>Get source: <a href="http://code.google.com/p/spirocanvas/" target="_blank">spirocanvas @ code.google</a>
</div>

<div id="socialDialog" title="Social" style="display:inline">
	
	<div id="gplus" style="display:block; float:left; width: 100px; height: 70px;">
		<!-- Place this tag where you want the +1 button to render -->
		<g:plusone size="tall"></g:plusone>

		<!-- Place this render call where appropriate -->
		<script type="text/javascript">
		  (function() {
			var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
			po.src = 'https://apis.google.com/js/plusone.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
		  })();
		</script>
	</div>
	
	<div id="fb" style="display:block; float:left; width: 100px; height: 70px;">
		<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=145439352170764&amp;xfbml=1"></script><fb:like href="http://www.gethugames.in/spirocanvas/" send="false" layout="box_count" width="100" show_faces="false" colorscheme="dark" font=""></fb:like>
	</div>
</div>


<!--Importing Facebook's Javascript SDK - Begin-->
<div id="fb-root"></div>
<script type="text/javascript">
    window.fbAsyncInit = function() {
        FB.init({appId: '145439352170764', status: true, cookie: true, xfbml: true});
		FB.Event.subscribe('auth.statusChange', function() { $( "#shareFacebook" ).html("Upload"); } );
    };
    (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = 'http://connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    }());
</script>
<!--Importing Facebook's Javascript SDK - End-->

</body>
</html>